<template>
	<view class="xl-icon" @click="onClick" :style="positionStyle">
		<!-- <rich-text v-if="unicode" :style="iconStyle" :class="family" :nodes="nodes"></rich-text> -->
		<text v-if="unicode" :style="iconStyle" :class="family">{{unicode}}</text>
		<view v-else :style="iconStyle" :class="[family, name]"></view>
	</view>
</template>

<script setup>
	/**
	 * icon 图标
	 * @description 基于字体的图标集，包含了大多数常见场景的图标。
	 * @property {String}			name			图标名称，见示例图标集
	 * @property {String}			color			图标颜色,可接受主题色 （默认 color['u-content-color'] ）
	 * @property {String | Number}	size			图标字体大小，单位px （默认 '16px' ）
	 * @property {Boolean}			bold			是否显示粗体 （默认 false ）
	 * @event {Function} click 点击图标时触发
	 * @example <xl-icon name="setting" color="#2979ff" size="28"></xl-icon>
	 */
	import { computed } from 'vue'
	
	// #ifdef APP-NVUE
	var domModule = weex.requireModule('dom');
	domModule.addRule('fontFace', {
		fontFamily: 'xingluo',
		src: "url('https://at.alicdn.com/t/c/font_3676216_i7lo2dyancf.ttf?t=1702485285742') format('truetype')"
	});
	// #endif
	
	// 传参
	const props = defineProps({
		family: {
			type: String,
			default: 'xingluo'
		},
		name: {
			type: String,
			default: ''
		},
		unicode: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: '#333333'
		},
		size: {
			type: [Number, String],
			default: 16
		},
		bold: {
			type: Boolean,
			default: false
		},
		top: {
			type: [Number, String],
			default: 0
		},
		left: {
			type: [Number, String],
			default: 0
		},
		right: {
			type: [Number, String],
			default: 0
		}
	})
	
	const positionStyle = computed(()=>{
		return {
			top: uni.$xl.calcUnit(props.top),
			marginLeft: uni.$xl.calcUnit(props.left), 
			marginRight: uni.$xl.calcUnit(props.right)
		}
	});
	
	const iconStyle = computed(()=>{
		return {
			fontSize: uni.$xl.calcUnit(props.size),
			fontWeight: props.bold ? 'bold' : '', 
			color: props.color
		}
	});
	
	const nodes = computed(()=>{
		return [{"text":props.unicode,"type":"text"}]
	})
	
	// 事件
	const emits = defineEmits(['click'])
	const onClick = () => {
		emits('click')
	};

</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	@import url('./iconfont.css');
	/* #endif */
	
	/* #ifdef APP-NVUE */
	.xingluo {
	  font-family: xingluo !important;
	  font-size: 16px;
	  font-style: normal;
	}
	/* #endif */
	
	.xl-icon {
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		align-items: center;
		position: relative;
	}
	
</style>
